<%@ page language="java"
	import="java.util.*,cn.edu.scau.cmi.tangqingning.model.Student"
	pageEncoding="utf-8"%>
<%@ page import="cn.edu.scau.cmi.tangqingning.dao.StudentDao"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/showdiv.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.validation.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$().ready(function() {
		// 在键盘按下并释放及提交后验证提交表单
		$("#signupForm").validate({
			rules : {
				functionScore : "required",
				interfaceScore : "required",
				innovationScore : "required",
				oralDefenseScore : "required",
			},
			messages : {
				functionScore : "非空",
				interfaceScore : "非空",
				innovationScore : "非空",
				oralDefenseScore : "非空",
			}
		});
	});
</script>
<style type="text/css">
.error {
 color:red;
}
#tablediv {
	margin-top: -100px;
	margin-left: -100px;
	width: 550px;
	height: 250px;
	opacity: 0;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
}

#tablediv.move {
	opacity: 1;
}

#model {
	position: fixed;
	margin-top: -100px;
	margin-left: -100px;
	width: 550px;
	height: 250px;
	top: 40%;
	left: 38%;
	z-index: 2000;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%,
		rgba(0, 0, 0, 0.15) 100%),
		radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%,
		rgba(0, 0, 0, 0.40) 120%) #989898;
	background-blend-mode: multiply, multiply;
	opacity: 0;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
	visibility: hidden;
}

#model.move {
	opacity: 1;
	top: 40%;
	visibility: visible;
}

#searchdiv {
	top: 40%;
	z-index: 2000;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
	opacity: 0;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	transition: all .5s ease-in;
	visibility: hidden;
}

#searchdiv.move {
	opacity: 1;
	top: 40%;
	visibility: visible;
}

.a_btn {
	width: 100px;
	height: 30px;
	border: none;
	padding: 0.5em 1.6em;
	background: #FF6633;
	color: #fff;
	font-family: '微软雅黑';
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
}

.e_btn {
	width: 180px;
	height: 50px;
	border: none;
	line-height: 40px;
	padding: 0.6m 1.6em;
	background: #FF6633;
	color: #fff;
	font-family: '微软雅黑';
	font-size: 30px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 0px 2px;
	border-radius: 10px;
}

.a_btn:hover, .e_btn:hover {
	background: #A5281B;
	text-decoration: none;
} /*指鼠标在链接*/
.a_btn:link, .e_btn:hover {
	text-decoration: none;
} /* 指正常的未被访问过的链接*/
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(52, 52, 52, 0.5);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

input[type=number] {
	-moz-appearance: textfield;
	width: 70px;
	height: 27px;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

input[type='text'] {
	width: 100%;
	height: 10%;
}

.textinput {
	font-size: 15px;
	width: 300px;
	height: 150px;
	resize: none;
	border: none;
	resize: none;
}

.left {
	float: left;
	width: 200px;
	height: 150px;
}

.right {
	margin-left: 210px;
	height: 150px;
}
</style>
</head>
<body>
	<!-- 评分 -->
	<form class="form-signin" action="evaluateGroup" method="post" id="signupForm">
		<table border="1" bordercolor="#FF6633"
			style="border-collapse:collapse;" width="100%">
			<tr>
				<td align="center" style="width: 250px; height: 50px; ">项目小组：</td>
				<td style="height: 80px; "><c:out value="${group.groupNumber}" />
				</td>
			</tr>
			<tr>
				<td align="center" style="width: 250px; height: 80px; ">项目介绍：</td>
				<td style="height: 80px; "><c:out
						value="${group.proIntroduction}" /></td>
			</tr>
			<tr>
				<td align="center">项目要求：</td>
				<td style="height: 80px; "><c:out
						value="${group.proRequirement}" /></td>
			</tr>
			<tr>
				<td align="center">项目分工：</td>
				<td style="height: 80px; "><c:out value="${group.proDivision}" /></td>
			</tr>
			<tr>
				<td colspan="2" align="center" style="height: 50px; "><a 
					href="javascript:void(0);" id="btnout" class="e_btn" onclick="opendiv('btnout','#model')">项目评分</a>
			</tr>
		</table>

		<div id="model">
			<p><font size="5px">(各项被评得分比例为 5:1:2:2)</font></p>
			<div align="center">
				<table align="center">
					<tr>
						<td>功能评分:<input type="number" name="functionScore"
							id="input1" placeholder="0-50" min="0" max="50">
						</td>
					</tr>
					<tr>

						<td>界面评分:<input type="number" name="interfaceScore"
							id="input2" placeholder="0-10" min="0" max="10">
						</td>
					</tr>
					<tr>
						<td>创新评分:<input type="number" name="innovationScore"
							id="input3" placeholder="0-20" min="0" max="20">
						</td>
					</tr>
					<tr>
						<td>答辩评分:<input type="number" name="oralDefenseScore"
							id="input4" placeholder="0-20" min="0" max="20">
						</td>
					</tr>
				</table>
				<input type="submit" class="a_btn" value="提交"> <a
					href="javascript:void(0);" id="btnin5" class="a_btn"
					onclick="closediv('btnin5','#model')">关闭</a>
			</div>
		</div>
		<div style="visibility:hidden">
			<!-- 为了把groupNumber传回后台 -->
			<input type="text" name="groupNumber" value="${group.groupNumber }"
				readonly="readonly" class="input">
		</div>
	</form>
	<!-- the overlay element -->
	<div class="overlay" id="overlay"></div>
</body>
</html>